import Header from "../../components/Header"
import React, { useState } from 'react'
import { InputItem, Button, Toast } from 'antd-mobile'
import './Register.less'
import { reqRegister } from '../../http/api'
export default function Register(props) {
    // 1.初始化数据
    const [user, setUser] = useState({
        phone: '',
        password: '',
        nickname: ''
    })
    // 点击了注册按钮
    /*     const toRegister = () => {
            reqRegister(user).then((res) => {
                if (res.data.code == 200) {
                    Toast.success(res.data.msg);
                    props.history.push("/login");
                }
            });
        }; */
    function toRegister() {
        // 发请求
        reqRegister(user).then(res => {
            if (res.data.code === 200) {
                // 弹成功
                Toast.success(res.data.msg);
                // 跳到登录页面
                props.history.push('/login')
            }
        })
    }
    return (
        // 绑定数据
        <div className="register">
            <Header title="注册"></Header>
            <div className="enter_user">
                <InputItem
                    onChange={(val) => setUser({ ...user, nickname: val })}
                    clear
                    placeholder="请输入昵称"
                >昵称</InputItem>
                <InputItem
                    clear
                    placeholder="请输入账号"
                    onChange={(val) => setUser({ ...user, phone: val })}
                >账号</InputItem>
                <InputItem
                    onChange={(val) => setUser({ ...user, password: val })}
                    clear
                    placeholder="请输入密码"
                >密码</InputItem>

                <Button onClick={() => toRegister()} className="btn_login" type="primary" inline style={{ marginRight: '4px' }}>注册</Button>
                <div onClick={() => props.history.push('/login')} className="tologin">
                    <span>已有账号，去登录</span>
                </div>
            </div>
            <div>{JSON.stringify(user)}</div>

        </div>
    )
}

